import React, { useRef, useEffect, useState } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

const VideoPlayer = ({ sources }) => {
  const videoRef = useRef(null);
  const [currentSourceIndex, setCurrentSourceIndex] = useState(0);

  useEffect(() => {
    if (videoRef.current) {
      const player = videojs(
        videoRef.current,
        {
          title: "Oceans", // 视频标题
          autoplay: true, // 自动播放
          muted: true, // 静音播放
          preload: "auto", // 自动加载
          controls: true, // 显示控制条
          fluid: true, // 自适应宽高
          playbackRates: [0.5, 1, 1.5, 2, 3, 4], // 播放速率选项
          sources: sources[currentSourceIndex], // 视频源
          controlBar: {
            currentTimeDisplay: true, // 当前播放时间
            timeDivider: true, // 时间分隔符
              durationDisplay: true, // 视频总时长
            remainingTimeDisplay: true, // 剩余播放时间
            volumePanel: {
              inline: true, // 音量控制面板是否内联显示
            },
            children: [
              { name: "playToggle" }, // 播放/暂停按钮
              { name: "currentTimeDisplay" }, // 当前播放时间显示
              { name: "progressControl" }, // 播放进度条
              { name: "durationDisplay" }, // 视频总时长显示
              {
                name: "playbackRateMenuButton",
                playbackRates: [0.5, 1, 1.5, 2],
              }, // 播放速率按钮
              { name: "volumePanel", inline: false }, // 音量控制面板
              { name: "FullscreenToggle" }, // 全屏按钮
            ],
          },
        },
        function onPlayerReady() {
          // 绑定事件
          this.on("play", function () {
            console.log("开始播放");
          });
          // 其他事件绑定...
        }
      );

      // 卸载组件时销毁播放器
      return () => {
        if (player) {
          player.dispose();
        }
      };
    }
  }, [sources, currentSourceIndex]); // 空数组表示只在组件挂载时执行

  return (
    <div>
      <div data-vjs-player>
        <video
          ref={videoRef}
          className="video-js vjs-default-skin vjs-big-play-centered"
        ></video>
      </div>
    </div>
  );
};

export default VideoPlayer;
